document.addEventListener('DOMContentLoaded', async () => {
  // const res = await axios.get('/dashboard', {
  //   headers: {
  //     'Authorization': localStorage.getItem('userToken')
  //   }
  // })
  // 获取数据
  const { data } = await axios.get('/dashboard')
  // console.log(data);
  // -----------------------------------------------------------------------
  // 渲染班级信息
  for (let k in data.overview) {
    document.querySelector(`[name=${k}]`).innerHTML = data.overview[k]
  };
  // ------------------------------------------------------------------------
  // 2022全学科薪资走势
  (() => {
    const myChart = echarts.init(document.getElementById('line'));

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '2022全学科薪资走势',
        textStyle: {
          fontSize: 16
        },
        left: 10,
        top: 15
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top: '20%'
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#d8d9d9',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#a9a9a9'
        },
        data: data.year.map(item => item.month)
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
        }, {
          offset: 1, color: '#5D75F0' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      series: [
        {
          data: data.year.map(item => item.salary),
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 6
          },
          symbolSize: 10,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
              }, {
                offset: 0.8, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
              }, {
                offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })();
  //-------------------------------------------------------
  // 班级薪资分布
  (() => {
    const myChart = echarts.init(document.getElementById('salary'));

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '班级薪资分布',
        textStyle: {
          fontSize: 16
        },
        left: 10,
        top: 15
      },
      tooltip: {
        trigger: 'item'
      },
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      legend: {
        bottom: '6%',
        left: 'center'
      },
      series: [
        {
          name: '班级薪资分布',
          type: 'pie',
          radius: ['50%', '64%'],
          center: ['50%', '45%'],
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false
          },
          data: data.salaryData.map(item => ({
            name: item.label,
            value: item.g_count + item.b_count
          }))
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })();
  // ----------------------------------------------------------------------------
  // 班级每组薪资
  (() => {
    const myChart = echarts.init(document.getElementById('lines'));

    // 指定图表的配置项和数据
    const option = {
      tooltip: {
        trigger: 'item'
      },
      grid: {
        left: 70,
        top: 30,
        right: 30,
        bottom: 50
      },
      xAxis: {
        type: 'category',
        data: data.groupData[1].map(item => item.name),
        axisLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        },
        axisLabel: {
          color: '#999'
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      color: [{
        type: 'line',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#34D39A'
        }, {
          offset: 1, color: 'rgba(52,211,154,0.2)'
        }]
      }, {
        type: 'line',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#499FEE'
        }, {
          offset: 1, color: 'rgba(73,159,238,0.2)'
        }]
      }],
      series: [
        {
          data: data.groupData[1].map(item => item.hope_salary),
          type: 'bar',
          name: '期望薪资'
        },
        {
          data: data.groupData[1].map(item => item.salary),
          type: 'bar',
          name: '就业薪资'
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    document.querySelector('#btns').addEventListener('click', function (e) {
      if (e.target.tagName === 'BUTTON') {
        this.querySelector('.btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')
        const k = e.target.innerHTML
        option.xAxis.data = data.groupData[k].map(item => item.name)
        option.series[0].data = data.groupData[k].map(item => item.hope_salary)
        option.series[1].data = data.groupData[k].map(item => item.salary)
        myChart.setOption(option)
      }
    })
  })();
  // -----------------------------------------------------------------------
  // 男女薪资分布
  (() => {
    const myChart = echarts.init(document.getElementById('gender'));

    // 指定图表的配置项和数据
    const option = {
      title: [{
        text: '男女薪资分布',
        left: 10,
        top: 10,
        textStyle: {
          fontSize: 16
        }
      }, {
        text: '男生',
        left: 'center',
        top: '45%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12
        }

      }, {
        text: '女生',
        left: 'center',
        top: '85%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12
        }
      }],
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '男生',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '30%'],
          data: data.salaryData.map(item => ({
            name: item.label,
            value: item.b_count
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }, {
          name: '女生',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          data: data.salaryData.map(item => ({
            name: item.label,
            value: item.g_count
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })();
  // -----------------------------------------------------
  // 籍贯分布
  (() => {
    const myChart = echarts.init(document.getElementById('map'));

    // 指定图表的配置项和数据
    const option = {
      title: {  //标题样式
        text: '籍贯分布',
        textStyle: {
          fontSize: 16,
        },
        left: 10,
        top: 10
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          // console.log(params)
          if (params.name) {
            return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value)) + '位学员';
          }
        },
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {//视觉映射组件
        type: 'continuous',
        bottom: 20,
        left: 40,
        min: 0,
        max: 6,
        text: [6, 0],
        realtime: false,  //拖拽时，是否实时更新
        calculable: false,  //是否显示拖拽用的手柄
        inRange: {
          color: ['#ffffff', '#0075F0']
        }
      },

      series: [
        {
          name: '籍贯分布',
          type: 'map',
          mapType: 'china',
          roam: false,//是否开启鼠标缩放和平移漫游
          itemStyle: {//地图区域的多边形 图形样式
            normal: {//是图形在默认状态下的样式
              label: {
                show: true,//是否显示标签
                textStyle: {
                  color: "black"
                },
                fontSize: 10,
                color: 'rgba(0,0,0,0.7)',
              },
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            zoom: 1.0,  //地图缩放比例,默认为1
            emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
              label: { show: true },
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            }
          },
          // top: "3%",//组件距离容器的距离
          data: data.provinceData.map(item => ({
            name: item.name.replace(/省|回族自治区|维吾尔自治区|壮族自治区|特别行政区|自治区/g, ''),
            value: item.value
          }))
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })();
})